import { useEffect } from "react";
import { Space, Divider } from "antd";
import { Card as SemiCard, Row, Col, List } from "@douyinfe/semi-ui";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import GatewayCard from "../components/gateway.card";

const GatewayAdministrators = () => {
    const { remoteData, windowInnerHeight } = useModel("global");
    const { baseInfo } = useModel("person.info");

    const state = useReactive({
        loading: false,
        administrators: [],
        selectedGateway: {},
        selectedOrganization: {},
        organizationServices: [],
    });

    const loadAdministrators = async () => {
        state.loading = true;
        let res = await remoteData({
            object: "multi-organization-gateway",
            serviceUrl: state.selectedGateway.url,
            serviceName: "/api/v1/administrator/getAll",
            params: {},
        });
        state.administrators = res || [];
        state.loading = false;
    };

    useEffect(() => {
        state.selectedGateway?.url && loadAdministrators();
    }, [state.selectedGateway]);

    const handleSelectedGateway = async (gateway) => {
        state.selectedGateway = gateway;
    };

    const passedAdminerVerify = async (personUuid) => {
        let res = await remoteData({
            object: "multi-organization-gateway",
            serviceUrl: state.selectedGateway.url,
            serviceName: "/api/v1/administrator/verifyStatus",
            params: { personUuid },
        });
        res !== null && (await loadAdministrators());
    };

    const destroyAdminer = async (personUuid) => {
        let res = await remoteData({
            object: "multi-organization-gateway",
            serviceUrl: state.selectedGateway.url,
            serviceName: "/api/v1/administrator/destroy",
            params: { personUuid },
        });
        res !== null && (await loadAdministrators());
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={5}>
                    <GatewayCard cardBodyHeight={cardBodyHeight} handleSelectedGateway={handleSelectedGateway} />
                </Col>

                <Col span={19}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>管理员信息</span>}
                        headerExtraContent={<Space split={<Divider type="vertical" />} size={4}></Space>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: 20, height: cardBodyHeight - 2, overflow: "auto" }}
                    >
                        <List
                            grid={{ gutter: 16, lg: 5, xl: 4, xxl: 3 }}
                            dataSource={state.administrators}
                            renderItem={(item) => {
                                let actions = [];
                                if (item.verifyStatus === false) {
                                    if (item.personUuid !== baseInfo.uuid) {
                                        actions.push(
                                            <a key="passed" onClick={() => passedAdminerVerify(item.personUuid)}>
                                                通过
                                            </a>
                                        );
                                        actions.push(
                                            <a key="passed" onClick={() => destroyAdminer(item.personUuid)}>
                                                拒绝
                                            </a>
                                        );
                                    } else {
                                        actions.push(
                                            <span key="waiting" style={{ color: "red" }}>
                                                等待核准
                                            </span>
                                        );
                                        actions.push(
                                            <a key="remove" onClick={() => destroyAdminer(item.personUuid)}>
                                                移除
                                            </a>
                                        );
                                    }
                                } else {
                                    actions.push(
                                        <a key="remove" onClick={() => destroyAdminer(item.personUuid)}>
                                            移除
                                        </a>
                                    );
                                }
                                return (
                                    <List.Item key={item.personUuid} style={{ fontSize: 16, marginBottom: 16 }}>
                                        <Space size={10}>
                                            <span>{item.realName}</span> (
                                            <Space split={<Divider type="vertical" />} size={0}>
                                                {actions}
                                            </Space>
                                            )
                                        </Space>
                                    </List.Item>
                                );
                            }}
                        />
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default GatewayAdministrators;
